<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台</title>

     <script src='/js/vue/vue.js'></script>
     <script src='/js/jquery.js'></script>
     <script src='/js/layer.js'></script>
</head>

<body>
<div id="right">
        <table width="84.8%"  border="0" cellspacing="0" cellpadding="0" style='background:white;'>
           <tr >
               <td class='td_text' style='text-align:left;text-indent:15px;color:#00a0d4;font-size:15px;'>添加规格</td>
               <td class='td_html'></td>
          </tr>
          <tr>
               <td class='td_text'>规格名称：</td>
               <td class='td_html'><input type='text' style='width:200px;height:30px;border:1px solid #ccc;' v-model='list.stand_name'/></td>
          </tr>
          <tr>
               <td class='td_text'>规格备注：</td>
               <td class='td_html'><input type='text' style='width:200px;height:30px;border:1px solid #ccc;' v-model='list.stand_notes'/></td>
          </tr>
          <tr style='height:30px;box-shadow:-1px 4px 5px #ccc;'>
          </tr>
        </table>


          <table width="84.8%"  border="0" cellspacing="0" cellpadding="0" style='background:white;margin-top:10px;'>
           <tr >
               <td class='td_text2' style='text-align:left;text-indent:15px;color:#00a0d4;font-size:15px;'>选项列表</td>
               <td class='td_html2'></td>
               <td class='td_save2'><a href="javascript:;" id="fabu" @click='stand_inp()'><font style='font-weight:bold;font-size:18px;position:relative;top:2px;'>+</font> 添加选项</a></td>
          </tr>
          <tr style='background: #f2f6fc;height:40px;'>
               <td class='td_text2' style=''>序号</td>
               <td class='td_html2' style='text-indent:140px;'>选项列表</td>
          </tr>
           <tr class='tr_html' style='display:none;'>
               <td class='td_text2' style='font-size:14px;text-align:right;color:#666;'>0</td>
               <td class='td_html2'><input type='text' style='width:200px;height:30px;border:1px solid #ccc;margin-left:70px;'/></td>
          </tr>
  {if isset($row)}
    {foreach $row.stand_list as $k=>$v}
           <tr class='tr_html'>
               <td class='td_text2' style='font-size:14px;text-align:right;color:#666;'>{$k+1}</td>
               <td class='td_html2'><input type='text' style='width:200px;height:30px;border:1px solid #ccc;margin-left:70px;' value='{$v}'/></td>
          </tr>
    {/foreach}
{/if}
          <tr>
               <td class='td_text2'></td>
               <td class='td_html2' style='text-align:center;'><button class='tjbtn' {if isset($row)}@click='stand_add({$row.id})'{else}@click='stand_add()'{/if}>保存</button></td>
               <td class='td_save2'></td>
          </tr>
          <tr style='height:30px;box-shadow:-1px 4px 5px #ccc;'>
          </tr>
        </table>
 
</div>
</div>
</body>
</html>
<script>
window.num='';
   new Vue({
     el:"#right",
     data:{
        list:{
           stand_name:"{$row.stand_name | default=''}",
           stand_notes:"{$row.stand_notes | default=''}",
           stand_list:[]
        }
     },methods:{
      stand_inp(){
        if(num==''){
           window.num=parseInt($('.tr_html:last').find('td').eq(0).text())+1;
        }else{
          window.num=parseInt(num)+1;
        }
        $('.tr_html:first').find('td').eq(0).text(window.num);
        var str="<tr class='tr_html' style=''>";
        str+=$('.tr_html:first').html();
        str+="</tr>";
          $('.tr_html:first').after(str);
          $('.tr_html:first').find('td').eq(0).text('');
      },stand_add(id=0){
        let self=this;
        var arr=new Object();
          $('.tr_html').each(function(){
            if($(this).find('td').eq(0).text()!='' && $(this).find('td').eq(1).find('input').val()!=''){
                   arr[$(this).find('td').eq(0).text()]=$(this).find('td').eq(1).find('input').val();
             }
          });

          for(var i = 0 ;i<arr.length;i++)
            {
               if(arr[i] == "" || typeof(arr[i]) == "undefined")
                {
                      arr.splice(i,1);
                      i= i-1;
                  
               }
              
           }
           self.list.stand_list=arr;
           if(id){
              
           }
           layer.msg('正在提交...', {time: 20000,icon:16});
           if(id){  
               $.ajax({
            url:'/admin.php/stand/stand_edit?id='+id,
            data:self.list,
            dataType:'json',
            type:'post',
            success:function(res){
              if(res.status=='ok'){
                layer.msg('编辑成功！', {time: 1500,icon:1});
              }else{
                layer.msg('编辑失败！', {time: 1500,icon:7});
              }
              setTimeout(function(){
                parent.layer.closeAll();
                 if(res.status=='ok'){
                    parent.location.reload();
                 }
              },1600);
            }
          });
         return;
        } 
          $.ajax({
            url:'/admin.php/stand/stand_save',
            data:self.list,
            dataType:'json',
            type:'post',
            success:function(res){
              if(res.status=='ok'){
                layer.msg('添加成功！', {time: 1500,icon:1});
              }else{
                layer.msg('添加失败！', {time: 1500,icon:7});
              }
              setTimeout(function(){
                parent.layer.closeAll();
                 if(res.status=='ok'){
                    parent.location.reload();
                 }
              },1600);
            }
          });
      }
     }
   });
</script>
<style>
body{
 background:#f5f5f5;

}
a{text-decoration:none;}
   #right table tr{
    height: 50px;
    border:0px;
   }
  #right table tr .td_text,#right table tr .td_text2{
      font-size:15px;
      color:#666;
      text-align:right;
      width:15%;
   }
    #right table tr .td_html{
      font-size:15px;
      color:#666;
      width:85%;
   }
   #right table tr .td_html2{
    font-size:15px;
      color:#666;
      width:70%;
   }
   #right table tr .td_save2{
    font-size:15px;
      color:#666;
    width:15%;
   }
   .td_save2 img{
      cursor:pointer;
   }
   .tjbtn {
    background: #FF5722;
    width: 100px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 2px;
    font-family: '微软雅黑';
    color: #fff;
    border: 0;
    font-size: 15px;
    cursor: pointer;
}
 #fabu{
      background: #09C878;
    padding: 0 10px 0 10px;
    color: #fff;
    float: right;
    margin: 8px 0px 10px 0;
    height: 26px;
    min-width: 26px;
    _width: 10px;
    line-height: 25px;
    border: 1px solid #00c874;
    border-radius: 18px;
    font-size: 12px
    }

      .tjbtn {
    background: #FF5722;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 2px;
    font-family: '微软雅黑';
    color: #fff;
    border: 0;
    font-size: 15px;
    cursor: pointer;
}
</style>
